<template>
  <div>
    <!-- 大容器 -->
    <section class="container">
      <!-- 左容器 -->
      <section class="itemLeft">
        <ItemPage #main>
          <ItemOne></ItemOne>
        </ItemPage>
        <ItemPage #main>
          <ItemTwo></ItemTwo>
        </ItemPage>
      </section>

      <!-- 右容器 -->
      <section class="itemRight">
        <ItemPage #main>
          <ItemThree></ItemThree>
        </ItemPage>
        <ItemPage #main>
          <ItemFour></ItemFour>
        </ItemPage>
      </section>
    </section>
  </div>
</template>
<script lang="ts" setup>
import ItemPage from './ItemPage.vue';
import ItemOne from './ItemOne.vue';
import ItemTwo from './ItemTwo.vue';
import ItemThree from './ItemThree.vue';
import ItemFour from './ItemFour.vue';
</script>
<style lang="scss">
// 主体容器样式
.container {
  width: 100%;
  margin: 0 auto;
  background-color: gray;
  display: flex;

  .itemLeft,
  .itemRight {
    flex: 1;
  }
}
</style>